<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .showdiv{
        width:1200px;
        height: 1200px;
        background-color: #666666;
        margin:0px auto;
    }
    .headdiv{
         width: 100%;
         height: 50px;
         /* position: sticky;
         top: 0px; */
         background-color: #2aabd2;
    }
    .main{
         position: relative;
    }
    .headtop{
         height: 50px;
    }
</style>
<body>
    <div class="main">
        <div class="headtop">

        </div>
        <div class="headdiv">

        </div>
        <div class="showdiv">

        </div>
    </div>
</body>
<script>
    var scrollT=document.body.scrollTop;
    var headdiv=document.querySelector(".headdiv");
    function s(){
        console.log("CCCCC")
        if(document.documentElement.scrollTop >= 50){
            headdiv.style.position="fixed";
            headdiv.style.top="0px";
            headdiv.style.zIndex="2";
            headdiv.style.background = "#f00"
        }else{
            headdiv.style.position="relative";
            headdiv.style.background = "#2aabd2"
        }
    }
    window.onscroll= function(){
                s()
    }
    
    console.log(document.body);
</script>
</html>